import type { JSX } from 'vue/jsx-runtime';
import { Button as VBtn } from 'ant-design-vue';

function ClassicDice() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <ul>
        <li>{$t('yonyG4HgUvpAeTwWpPVb')}</li>
        <li>{$t('zhujuFl3Oo2yvqkG6E8Q7')}</li>
      </ul>
      <p class="!mt-7.5">
        {$t('l1aiI9cveabZidZm4V5')}
      </p>
      <p>{$t('anptd7T3divjwfOp6lZTg')}</p>
      <p>{$t('bw8w9OaUDlOjKgZl4Oql8')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Coinflip() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <ul>
        <li>{$t('gcFBfo0SpLxo081uYExo6')}</li>
        <li>{$t('tyl8tN7RoyIZs2JnAbJ')}</li>
      </ul>
      <p class="!mt-7.5">
        {$t('zsOUkFIx64fvOc5ERsffy')}
      </p>
      <p>{$t('pQgr3gDepawwk0MHa3Ciu')}</p>
      <p>{$t('bw8w9OaUDlOjKgZl4Oql8')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Crash() {
  return (
    <>
      <h3>{$t('gEdynna5WNum2PzYDlw2')}</h3>
      <p>{$t('5IuBmapnw0Q7IiHfMs81i')}</p>
      <p>{$t('ufk6J76TSnZvYWdYHsq0a')}</p>
      <p>{$t('eWPdOkbEOza2CqoWl4nrp')}</p>
      <p>{$t('hs8yhVzvxbySay5Med9ze')}</p>
      <h3>
        {$t('iYt7YKtSmqYgGjTd9xX6n')}
        <a href="/verify/crash.html" target="_blank">{` GitHub ${$t('eiLlqtPwcILvwuavip9Il')} `}</a>
      </h3>
      <p>{$t('xvxjuutNqcidZgXyMlley')}</p>
      <p class="!m-0 !p-0">{$t('cyWnPtBMjGraHjMbwVAm')}</p>
      <p class="break-all !mt-0.5">
        6b5124897c3c48d0e46cc9249f08c7e560792459f1bad1171224643b5d2be231
      </p>
      <ol>
        <li>{$t('vGNfcCupsdLib8cR5UI5')}</li>
        <li>{$t('bGvUinLIrHg2xs8Slyu')}</li>
        <li>
          {$t('fsroTvfJL6VFyNSjvaaY')}
          <p>
            {$t('2fsR_0Bwgze74Y4cDDe')}
          </p>
          <p>99/(1-0.419206889692064) = 170.45656748150867</p>
        </li>
        <li>
          {$t('sgAfCgliOr2FtMxJiy9O7')}
          <p>170/100 = 1.70</p>
        </li>
      </ol>
      <p>{$t('q1k6RjlhiAnHus4EvzPkj')}</p>
      <div>{$t('c7PiJhvsp2jYbLWdyuKn')}</div>
      <p class="!mt-0.5">
        {$t('fwjp4DOpUzGfsy2TUtZe')}
      </p>
      <p>{$t('7YvFuVuXFlyvj9S3rEnq')}</p>
    </>
  );
}

function HashDice() {
  return (
    <>
      <h3>{$t('vd7BdA4ZlrsB07Ip7Jk')}</h3>
      <p>{$t('ksapX2BNgj0O7IgyzLnjJ')}</p>
      <p>{$t('ql5EoZvxUUdEyRntysAe')}</p>
      <p>{$t('nvNAc3WaO1qpuu5Hu8j6')}</p>
      <h3>{$t('znJq6nI70kriBLlrmHta')}</h3>
      <p>{$t('wsmpedUsmQu4KujmRNwyq')}</p>
      <ol>
        <li>{$t('qlsZgQLmLoQx_3Sc3Zalt')}</li>
        <li>{$t('tuPd6SxLgsDyNMeqwe5B')}</li>
        <li>{$t('wupc9lwH7P1ZRT0J5Bsu')}</li>
      </ol>
      <h3>{$t('wip_4ClesJ6GXwH2YpUn')}</h3>
      <p>{$t('9anUcIHxLJowwzWizbvQ8')}</p>
      <div class="pre-content">
        <div>
          {`function getRoll (serverSeed, clientSeed, nonce) {
  var hash = hmac_sha512(
    clientSeed: nonce,
    serverSeed
  );
  var index = 0;
  do {
    var lucky = parseInt(hash.substr(index, 5), 16);
    index += 5;
  } while (lucky &gt;= 1000000);
  return lucky % 100000;
}` }
        </div>
      </div>
      <p>
        {$t('1wNKquOF5Tn07x3xLo')}
        {` `}
        <a href="/verify/hash-dice.html" target="_blank">

          {$t('uNyZwFrmhHc5bqaDeMjO')}
        </a>
        .
      </p>
      <p>{$t('9qGs3gO3xDTzg0odWpyzS')}</p>
    </>
  );
}

function Limbo() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <p>{$t('ipheFUr1uOWuPn4mP8Hb9')}</p>
      <p class="!m-0 !p-0">{$t('cyWnPtBMjGraHjMbwVAm')}</p>
      <p class="break-all !mt-0.5">
        6b5124897c3c48d0e46cc9249f08c7e560792459f1bad1171224643b5d2be231
      </p>
      <ol>
        <li>{$t('drQq6TlfhVAokiMeOiPbs')}</li>
        <li class="break-all">
          {$t('edyh_39yUtU4OhT2x5E3v')}
          <div>1887939992208324/4503599627370496 = 0.419206889692064.</div>
        </li>
        <li>
          {$t('v7whcwP2DIyYAptomDtGf')}
          <div>99/(1-0.419206889692064) = 170.45656748150867</div>
        </li>
        <li>
          {$t('pqDie3Bm6L4IGb7Qfrv')}
          <div>
            170/100 = 1.70
          </div>
        </li>
      </ol>
      <p class="!mt-7.5">
        {$t('zsOUkFIx64fvOc5ERsffy')}
      </p>
      <p>{$t('pQgr3gDepawwk0MHa3Ciu')}</p>
      <p>{$t('bw8w9OaUDlOjKgZl4Oql8')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Mines() {
  return (
    <>
      <h3>{$t('9ZtQcK1fOsXgqExZoSi')}</h3>
      <p>{$t('wkjo5UoVsAAbvnMpBfVjN')}</p>
      <div class="pre-content mb-2.5">
        <div>
          {`const crypto = require("crypto");

function getResult(hash) {
  const allNums = [
    7, 2, 19, 25, 1, 13, 5, 24, 14, 6,
    15, 9, 22, 16, 3, 17, 18, 20, 8, 21, 4,
    12, 10, 23, 11,
  ];
  let seed = hash;
  let finalNums = createNums(allNums, seed);
  seed = crypto.createHash("SHA256")
    .update(seed).digest("hex");
  finalNums = createNums(finalNums, seed);
  return finalNums.map((m) =&gt; m.num.num);
}

function createNums(allNums, hash) {
  let nums = [];
  let h = crypto.createHash("SHA256")
  .update(hash).digest("hex");
  allNums.forEach((c) =&gt; {
    nums.push({ num: c, hash: h });
    h = h.substring(1) + h.charAt(0);
  });

  nums.sort(function (o1, o2) {
    if (o1.hash &lt; o2.hash) {
    return -1;
    } else if (o1.hash === o2.hash) {
    return 0;
    } else {
    return 1;
  }
  });
  return nums;
}

function main(serverSeed, clientSeed, nonce) {
  let resultArr = [clientSeed, nonce];
  let hmacSha256Result = crypto
    .createHmac("sha256", serverSeed)
    .update(resultArr.join(":")).digest("hex");
  let resultList = getResult(hmacSha256Result);
  console.log(resultList);
}

// main("server seed", "client seed", "nonce");`}
        </div>
      </div>
    </>
  );
}

function Plinko() {
  return (
    <>
      <h3>{$t('rxFe8yRqftwq9KzOWbT')}</h3>
      <p>{$t('ukGVgcSb6CEz50T7tun')}</p>
      <p>{$t('0kKovdQeKnErCctxodFyJ')}</p>
      <p>{$t('nfctH0FtowNuL1WqFlKe')}</p>

      <p>{$t('vcKbuQWe9Yr5Qps7wOSg')}</p>
      <ul>
        <li>{$t('xKqTa65rDc1jP9Gizk7uJ')}</li>
        <li>{$t('2ohv6m35gYyYhq5tWxkPz')}</li>
      </ul>
      <p class="!mt-7.5">
        {$t('jn6wsHm4esL5UA1hQ6kd')}
      </p>
    </>
  );
}

function Tower() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('r3XfYf2J9cbQb6V2Cn0h9')}</p>
      <p>{$t('zsOUkFIx64fvOc5ERsffy')}</p>
      <p>{$t('pQgr3gDepawwk0MHa3Ciu')}</p>
      <p>{$t('bw8w9OaUDlOjKgZl4Oql8')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function UltimateDice() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <ul>
        <li>{$t('gDpfE6FaPxq8qLFeNxSh5')}</li>
        <li>{$t('3aXfZkx0o9FSwoIh35Ok7')}</li>
      </ul>
      <p class="!mt-7.5">
        {$t('zsOUkFIx64fvOc5ERsffy')}
      </p>
      <p>{$t('pQgr3gDepawwk0MHa3Ciu')}</p>
      <p>{$t('bw8w9OaUDlOjKgZl4Oql8')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Wheel() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('pRxo0kEmTdRjX3w3CqO')}</p>
      <ul>
        <li>{$t('wERh9QthpvYjF09O52xiH')}</li>
        <li>{$t('n7t4hf1CpWezjrmpGFdm')}</li>
      </ul>
      <p class="!mt-7.5">
        {$t('zsOUkFIx64fvOc5ERsffy')}
      </p>
      <p>{$t('pQgr3gDepawwk0MHa3Ciu')}</p>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function RingOfFortune() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <ul>
        <li>{$t('8nTjoXqknmV10rbURe7N')}</li>
      </ul>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Keno() {
  return (
    <>
      <h3>{$t('mxvXwnvOSuIxJ3AmtRnk')}</h3>
      <p>{$t('2ZsaZzOzr6x8if04Hd6Oa')}</p>
      <ul>
        <li>{$t('wkjo5UoVsAAbvnMpBfVjN')}</li>
      </ul>
      <p>{$t('1c9ByWr7xWp1SjRmuxdVu')}</p>
    </>
  );
}

function Twist() {
  return (
    <>
      <h3>{$t('up3Rd8Fs5HosDBkl9M95r')}</h3>
      <p>{$t('bya0NdoExhA5dLtUiFyT')}</p>
      <h3>{$t('yYhJzLyvCrbtorq6nTjJ')}</h3>
      <p class="break-all">
        {$t('ecxpPocHotLg8CjOxXuGp')}
      </p>
      <h3>{$t('3sTyruWhe4Z7jVYb5o0Rt')}</h3>
      <p class="break-all">
        {$t('wz6Xd4wmyt1OfQv4ZeSbp')}
      </p>
      <h3>{$t('aLdrMUsMbWfGuRy6UpOe')}</h3>
      <p class="break-all">
        {$t('aaIzGudVuOn9uLpeusl71')}
      </p>
    </>
  );
}

function Roulette() {
  return (
    <>
      <h3>
        { $t('9ZtQcK1fOsXgqExZoSi') }
      </h3>
      <p>
        { $t('2ZsaZzOzr6x8if04Hd6Oa') }
      </p>
      <ul>
        <li>
          { $t('gDpfE6FaPxq8qLFeNxSh5')}
        </li>
        <li>
          { $t('qq3hXyP9JmnDdqF8_2dai') }
        </li>
      </ul>
      <p>
        { $t('zsOUkFIx64fvOc5ERsffy') }
      </p>
      <p>
        { $t('anptd7T3divjwfOp6lZTg') }
      </p>
      <p>
        { $t('tfD4lgBjPawntFhk9Mx8H') }
      </p>
      <p>
        { $t('1c9ByWr7xWp1SjRmuxdVu') }
      </p>
    </>
  );
}

function DefaultFairness() {
  return (
    <>
      <h3>
        { $t('9ZtQcK1fOsXgqExZoSi') }
      </h3>
      <p>
        { $t('2ZsaZzOzr6x8if04Hd6Oa') }
      </p>
      <ul>
        <li>
          { $t('8nTjoXqknmV10rbURe7N') }
        </li>
      </ul>
    </>
  );
}

function Empty() {
  return (
    <></>
  );
}

export const Views: Record<string, () => JSX.Element> = {
  'classic-dice': ClassicDice,
  'coinflip': Coinflip,
  'crash': Crash,
  'hash-dice': HashDice,
  'limbo': Limbo,
  'mines': Mines,
  'plinko': Plinko,
  'tower': Tower,
  'ultimate-dice': UltimateDice,
  'wheel': Wheel,
  'ring-of-fortune': RingOfFortune,
  'keno': Keno,
  'twist': Twist,
  'baccarat': DefaultFairness,
  'blackjack': DefaultFairness,
  'win-go': DefaultFairness,
  'video-poker': DefaultFairness,
  'roulette': Roulette,
};

export default ({ game }: { game?: string }) => {
  const Comp = game ? Views[game as keyof typeof Views]?.() ?? null : null;
  if (!Comp)
    return null;
  const btnProps = {
    class: 'ant-cover__Button-3d-primary min-w-190px !mt-3.5 lt-tabletl:w-full',
    type: 'primary' as const,
    text: 'Validate',
    onClick() {
      const href = game ? `/verify/${game}.html` : '';
      href && window.open(href, '_blank');
    },
  };
  const container = {
    class: 'flex-center',
  };
  return (
    <>

      {Comp}
      <div {...container}>
        <VBtn {...btnProps}>
          Validate

        </VBtn>
      </div>
    </>
  );
};
